<!--
 * @Author: 梁青春
 * @Date: 2022-04-22 08:48:28
 * @LastEditTime: 2022-04-24 16:51:12
 * @LastEditors: 梁青春
-->
<template>
  <div class="site-wrapper site-page--login">
		<div class="site_title">河北云谷</div>
		<div class="site-content__wrapper">
			<div class="site-content">
				<div class="login-main">
					<div class="login-title">用户登录</div>
					<el-form
						:model="dataForm"
						:rules="dataRule"
						@keyup.enter="dataFormSubmit()"
						status-icon
					>
						<el-form-item class="login-input"
							prop="userName"
						>
							<el-input
								v-model="dataForm.userName"
								placeholder="请输入账号..."
							/>
						</el-form-item>
						<el-form-item class="login-input"					
							prop="password"
						>
							<el-input
								v-model="dataForm.password"
								placeholder="请输入密码..."
								show-password
							></el-input>
						</el-form-item>
						<el-form-item
							class="login-input"
							prop="captcha"
						>
							<el-row :gutter="20">
								<el-col :span="14">
									<el-input
										v-model="dataForm.captcha"
										maxlength="5"
										placeholder="请输入验证码"
									>
									</el-input>
								</el-col>
								<el-col :span="10" class="login-captcha">
									<img
										:src="captchaPath"
										@click="getCaptcha"
										alt=""
									/>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item>
							<el-button
								class="login-btn-submit"
								@click="dataFormSubmit"
								>登录</el-button
							>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<div class="record">©2021 技术支持：张家口亚讯科技有限公司</div>
	</div>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { getUUID } from '@/utils'
    import { ref, reactive } from 'vue'
	import { useStore } from 'vuex'

	// 访问 store
	const store = useStore()
	// 访问store.Action中login方法
	const login = (data) => store.dispatch('login', data)
	const dataForm = reactive({
        userName: '',
        password: '',
        captcha: '',
		uuid: ''
    })
    const dataRule = reactive({

    })
	let captchaPath = ref(null)
	// 获取验证码
	const getCaptcha = () => {
		dataForm.uuid = getUUID()
		captchaPath.value = api.user.adornUrl(dataForm.uuid)	
	}
	const dataFormSubmit = () => {
		login(dataForm).then(res => {
			console.log('submit!', res)
		})
	}
	getCaptcha()
	
</script>

<style lang="scss" scoped>
.site_title {
	text-align: center;
	font-size: 60px;
	color: #fff;
	margin-top: 80px;
	letter-spacing: 5px;
}
.site-wrapper.site-page--login {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	.record {
		bottom: 28px;
		position: absolute;
		color: #fff;
		width: 100%;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #fafafa;
	}
	&:before {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		content: '';
		background-image: url(@/assets/img/main_bg.gif);
		background-size: cover;
	}
	.site-content__wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: transparent;
	}
	.site-content {
		padding: 30px 500px 30px 30px;
	}
	.brand-info {
		margin: 220px 100px 0 90px;
		color: #fff;
	}
	.brand-info__text {
		margin: 0 0 22px 0;
		font-size: 48px;
		font-weight: 400;
		text-transform: uppercase;
	}
	.brand-info__intro {
		margin: 10px 0;
		font-size: 16px;
		line-height: 1.58;
		opacity: 0.6;
	}
	.login-main {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 414px;
		height: 456px;
		text-align: center;
		background: #078bbdc7;
		border-radius: 8px;
		background-size: 100% 100%;
		:deep(.el-form-item) {
			margin: auto;
			width: 80%;
			margin-bottom: 18px;
		}
	}
	.login-title {
		height: 25px;
		font-size: 24px;
		font-family: Source Han Sans CN;
		margin: 49px 0 45px 0;
		font-weight: bold;
		color: #ffffff;
		line-height: 18px;
		text-shadow: 0px 1px 0px rgba(18, 112, 164, 0.84);
		img {
			width: 180px;
			margin-bottom: 20px;
		}
	}
	.login-captcha {
		overflow: hidden;
		> img {
			width: 100%;
			cursor: pointer;
		}
	}
	.login-btn-submit {
		width: 327px;
		height: 47px;
		margin-top: 38px;
		color: #fff;
		background: #1890ff;
		border: 0;
	}
}
</style>